/*
用户个人中心路由组件
 */

// import React from 'react'
// import { Result, List, WhiteSpace, Button, Modal } from 'antd-mobile'
// import { connect } from 'react-redux'
// import Cookies from 'js-cookie'
// import { resetUser } from '../../redux/actions'

// const Item = List.Item
// const Brief = Item.Brief

// class Personal extends React.Component {
//   logout = () => {
//     // alert('-----')
//     Modal.alert('退出', '确定退出登陆吗?', [
//       { text: '取消' },
//       {
//         text: '确定',
//         onPress: () => {
//           // 干掉cookie中userid
//           Cookies.remove('userid')
//           // 干掉redux管理user
//           this.props.resetUser()
//         }
//       }
//     ])
//   }

//   render() {
//     const { username, info, header, company, post, salary } = this.props.user
//     return (
//       <div style={{ marginBottom: 50, marginTop: 50 }}>
//         <Result
//           img={
//             <img
//               src={require(`../../assets/images/${header}.png`)}
//               style={{ width: 50 }}
//               alt="header"
//             />
//           }
//           title={username}
//           message={company}
//         />

//         <List renderHeader={() => '相关信息'}>
//           <Item multipleLine>
//             <Brief>职位: {post}</Brief>
//             <Brief>简介: {info}</Brief>
//             {salary ? <Brief>薪资: {salary}</Brief> : null}
//           </Item>
//         </List>
//         <WhiteSpace />
//         <List>
//           <Button type="warning" onClick={this.logout}>
//             退出登录
//           </Button>
//         </List>
//       </div>
//     )
//   }
// }

// export default connect(state => ({ user: state.user }), { resetUser })(Personal)

import React from 'react'
import { Result, List, WhiteSpace, Button, Modal } from 'antd-mobile'
import { connect } from 'react-redux'
import Cookies from 'js-cookie'
import { resetUser } from '../../redux/actions'

const Item = List.Item
const Brief = Item.Brief

class Personal extends React.Component {
  logout = () => {
    Modal.alert('退出', '确定退出登录嘛？', [
      { text: '取消' },
      {
        text: '确定',
        onPress: () => {
          Cookies.remove('userid')
          this.props.resetUser()
        }
      }
    ])
  }

  render() {
    const { username, info, header, company, post, salary } = this.props.user
    return (
      <div style={{ marginBottom: 50, marginTop: 50 }}>
        <Result
          img={
            <img
              src={require(`../../assets/images/${header}.png`)}
              style={{ width: 50 }}
              alt="header"
            />
          }
          title={username}
          message={company}
        />

        <List renderHeader={() => '相关信息'}>
          <Item multipleLine>
            <Brief>post:{post}</Brief>
            <Brief>info:{info}</Brief>
            {salary && <Brief>salary:{salary}</Brief>}
          </Item>
        </List>

        <WhiteSpace />
        <List>
          <Button type="warning" onClick={this.logout}>
            退出登录
          </Button>
        </List>
      </div>
    )
  }
}

export default connect(state => ({ user: state.user }), { resetUser })(Personal)
